<template>
  <div class="home_index">
    <div class="homecss">
      <!-- 搜索头 -->
      <div class="line flex">
        <a class="logo" href="javascript:;"></a>
        <div class="shou flex" @click="search">
          <i class="shouone"><van-icon name="search" /></i>
          <div class="shoutow">搜索商品，共145758款好物</div>
        </div>
        <div class="denglu" @click="toLogin" v-if="!token">登录</div>
      </div>
      <!-- 首页头导航 -->
      <div class="dav_top">
        <banners></banners>
      </div>
      <!-- 轮播图 -->
      <div class="lunbo">
        <el-carousel trigger="click" arrow="never" loop autoplay height="185px">
          <el-carousel-item v-for="item in swiperList" :key="item.id">
            <img :src="item.picUrl" />
          </el-carousel-item>
        </el-carousel>

      </div>
      <!-- 轮播图下文字 -->
      <div class="grow_container flex">
        <div class="left flex" v-for="item in SelfOperList" :key="item.icon">

          <img :src="item.icon" alt="" class="iconfont">

          <div class="grow_zi">{{ item.desc }}</div>
        </div>
      </div>
    </div>
    <!-- 首页中导航 -->
    <div class="grow_nav flex">
      <div class="grow_piece flex_c" v-for="item in kingKongModule" :key="item.picUrl">
        <img class="img" :src="item.picUrl">
        <div class="txt">{{ item.text }}</div>
      </div>
    </div>

    <!-- 新人专享礼 -->
    <div class="moduleTitle">
      <span class="txt"> 新人专享礼</span>
    </div>

    <div class="home_indexActivityModule_container">
      <!-- left -->
      <div class="home_indexActivityModule_left">
        <div class="indexActivityModule_left_text">新人专享礼包</div>
        <div class="indexActivityModule_left_div">
          <img src="//yanxuan.nosdn.127.net/static-union/1648017994dd2933.png" alt="" />
        </div>
      </div>
      <!-- right -->
      <div class="home_indexActivityModule_right">
        <div class="indexActivityModule_right_module1">
          <div class="indexActivityModule_right_activityItem" v-for="item in indexActivityList" :key="item.tag">
            <div class="cnt">
              <div class="title">{{ item.title }}</div>
              <div class="subTitle">{{ item.subTitle ? item.subTitle : item.tag }}</div>
            </div>
            <div class="picWrap">
              <div class="discount" v-if="item.activityPrice || item.originPrice">
                <div class="line1" v-show="item.activityPrice">{{ item.activityPrice }}</div>
                <div class="line2" v-show="item.originPrice">{{ item.originPrice }}</div>
              </div>
              <img :src="item.picUrl" />
            </div>
          </div>
        </div>
      </div>
    </div>



    <!-- 类目热销榜 -->
    <div class="lazy-component-wrapper">
      <div class="categoryHotSellModule_indexFloor">
        <div class="moduleTitle">
          <div class="left">类目热销榜</div>
        </div>
        <div class="content">
          <div class="line1" v-for="item in categoryHotSellTop" :key="item.categoryName">
            <div class="item-big">
              <div>
                <div class="name">
                  <span class="txt">{{ item.categoryName }}</span>
                </div>
              </div>
              <div class="imgWrap">
                <div>
                  <div class="tm-lazyload">
                    <img :src="item.picUrl" alt="lazyload-image" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="line2">
          <div class="item" v-for="item in categoryHotSellBelow" :key="item.categoryName">
            <div class="name">{{ item.categoryName }}</div>
            <div class="imgWrap">
              <div>
                <div class="tm-lazyload">
                  <img :src="item.picUrl" alt="lazyload-image" />
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="item">
            <div class="name">美食酒水榜</div>
            <div class="imgWrap">
              <div>
                <div class="tm-lazyload">
                  <img
                    src="https://yanxuan-item.nosdn.127.net/b6c1b1d3c7a6a1a40d92991d8cf01f0b.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=200x200"
                    alt="lazyload-image" />
                </div>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <!-- 精选 -->
    <div class="home_index_component_wrapper">
      <div class="sceneLightShoppingGuideModule">
        <div class="sceneLightShoppingGuideModuleAll">
          <div :class="{
            styleBanner_styleBanner_picList: item.styleItem,
            styleBanner_styleBanner_singlePic: item.styleBanner,
          }" v-for="(item, index) in sceneLightShoppingGuideList" :key="index">
            <div class="title">
              {{
                item.styleItem
                ? item.styleItem
                  ? item.styleItem.title
                  : '严选直播'
                : item.styleBanner
                  ? item.styleBanner.title
                  : '好好睡觉'
              }}
            </div>
            <div class="desc">
              {{
                item.styleItem
                ? item.styleItem
                  ? item.styleItem.desc
                  : '种草攻略'
                : item.styleBanner
                  ? item.styleBanner.desc
                  : '黑科技床品'
              }}
            </div>
            <div class="picList">
              <img :src="
                item.styleItem
                  ? item.styleItem
                    ? item.styleItem.itemPicBeanList[0].picUrl
                    : 'https://yanxuan-item.nosdn.127.net/91a264d84fed57f97c48dc107370e941.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=150x150'
                  : item.styleBanner?.picUrl
              " class="pic" />
              <img v-if="item.styleItem" :src="
                item.styleItem
                  ? item.styleItem.itemPicBeanList[1].picUrl
                  : 'https://yanxuan-item.nosdn.127.net/f8be60304cfac80a103bac65d4e5b09f.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=150x150'
              " class="pic" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 为你精选 -->
    <goods :DataLists=DataLists :getDataList="getDataList"></goods>
    <!-- @getDataList="getDataList"  -->

  </div>
  <van-back-top offset="500" right="5" bottom="60" style="background-color: #fff;"><van-icon name="arrow-up"
      color="#b1b1b1" /></van-back-top>
</template>

<script setup lang="ts">
import homeitem from '@/components/homeitem/index.vue'
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import banners from '../banners/index.vue';
import goods from '@/components/goods/index.vue'
import {useUserInfoStore} from '../../store/user';
import {GET_TOKEN} from '../../utils/token-utils'
import homeApi, {
  type SelfOperatedList,
  labelDatachildList,
  DataTuList,
  CarouselList,
  ItemsParams,
  ItemLists,
  ItemList,
  IndexActivityModule,
  CategoryList,
  SceneLightShoppingGuideModule,
} from '@/api/home'
import { watch } from 'vue';
const useUserStore = useUserInfoStore();
const token = GET_TOKEN()
const router = useRouter()
// 跳转到登录页面
const toLogin = () => {
      if ( useUserStore.name ) {return};
      router.push('/login')
    }
// 轮播
const swiperList = ref<CarouselList[]>()
// 标签页
const kingKongModule = ref<labelDatachildList[]>()
// 标签页列表
// const kingKongList = ref<kingKongListModel[]>()
// 网易自营品牌
const SelfOperList = ref<SelfOperatedList[]>()
const picList = ref<ItemList[]>([])
const num = ref<number>(0)
const indexActivityList = ref<IndexActivityModule[]>([])
const categoryHotSellList = ref<CategoryList[]>([])
const categoryHotSellTop = ref<CategoryList[]>([])
const categoryHotSellBelow = ref<CategoryList[]>([])
const sceneLightShoppingGuideList = ref<SceneLightShoppingGuideModule[]>([])
const DataList = ref<ItemLists[]>([])
const DataLists = ref<ItemLists[]>([])
const ItemsList = ref<string>('')

// 生命周期
onMounted(() => {
  getHomeData()
  // getDataList()
})
// 首页数据获取
const getHomeData = async () => {
  try {
    let result = await homeApi.getHomeList()

    // 网易自营数据
    SelfOperList.value = result.data.data.policyDescList
    // 首页中导航 
    kingKongModule.value = result.data.data.kingKongModule.kingKongList
    // 轮播
    swiperList.value = result.data.data.focusList
    // 新人
    indexActivityList.value = result.data.data.indexActivityModule
    categoryHotSellList.value = result.data.data.categoryHotSellModule.categoryList
    sceneLightShoppingGuideList.value = result.data.data.sceneLightShoppingGuideModule

  } catch (error) {
    console.log(error);
  }
}
watch(
  categoryHotSellList,
  (nav) => {
    if (nav) {
      nav.forEach((item, index) => {
        if (index < 2) {
          categoryHotSellTop.value.push(item)
        } else {
          categoryHotSellBelow.value.push(item)
        }
      })
    }
  },
  { deep: true }
)

setInterval(() => {
  //materialType
  if (num.value > picList.value.length - 2) {
    num.value = 0
  } else {
    num.value++
  }
}, 3000)




const getDataList = async () => {
  try {
    let result = await homeApi.getHomeItems({
      itemIdsStr: ItemsList.value,
      size: 20,
    })

    if (result.code === 200) {
      DataList.value = result.data.itemList
      ItemsList.value = result.data.itemIdsStr

    }
    return Promise.resolve('ok')
  } catch (error) {
    console.log(error)
  }
}


watch(DataList, (nav) => {
  DataLists.value.push(...nav)
})



const Router = useRouter()
function search() {
  Router.push('/search')
}
</script>

<style scoped lang="less">
/* 布局开始 */
.flex {
  display: flex;
}

.flex_c {
  display: flex;
  flex-direction: column;
}

/* 布局结束 */

.homecss {
  width: 100%;
}

.dav_top {
  width: 100%;
}

/* 搜索头开始 */
.homecss .line {
  width: 345px;
  height: 28px;
  padding: 8px 15px;
  align-items: center;
  background: #fff;
}

.line .shou {
  width: 221px;
  height: 28px;
  background: #ededed;
  align-items: center;
  justify-content: center;
  border-radius: 5px;

}

.line .logo {
  width: 69px;
  height: 20px;
  vertical-align: middle;
  margin: 0px 10px 0px 0px;
  background-size: 176px;
  display: inline-block;
  background-image: url(./image/tu1.png);
  background-position-x: -57px;
  background-position-y: 20px;
}

.line .shoutow {
  font-size: 15px;
  color: #666;

}

.line .shouone {
  font-size: 14px;
  margin-right: 5px;

}

.line .denglu {
  width: 37px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #dd1a21;
  border: 1px solid #dd1a21;
  border-radius: 5px;
  margin-left: 8px;
  font-size: 14px;
}

/* 搜索头结束 */

/* 轮播图开始 */
.homecss .lunbo {
  width: 100%;
  height: 185px;
}

.homecss .lunbo img {
  width: 100%;
  height: 100%;
}

/* 轮播图结束 */

/* 轮播图下文字开始 */
.grow_container {
  width: 345px;
  height: 36px;
  padding: 0px 15px;
  align-items: center;
}

.grow_container .left {
  width: 114px;
  height: 21px;
}

.grow_container .center {
  width: 114px;
  height: 21px;
}

.grow_container .right {
  width: 114px;
  height: 21px;
}

.grow_container .iconfont {
  width: 16px;
  height: 16px;
  background-size: 100% 100%;
}

.grow_container .grow_zi {
  font-size: 12px;
  color: #333;
  margin-left: 4px;
}

/* 轮播图下文字结束 */


/* 首页中导航开始 */
.grow_nav {
  width: 100%;
  height: 175px;
  flex-wrap: wrap;
}

.grow_nav .grow_piece {
  width: 55px;
  height: 78px;
  margin: 5px 10px 4.5px;
}

.grow_nav .grow_piece .txt {
  width: 55px;
  height: 18px;
  margin-top: 5px;
  font-size: 12px;
  color: rgb(51, 51, 51);
}

/* 首页中导航结束 */
</style> 
<style lang="less" scoped>
.home_index {

  //新人专享礼
  .moduleTitle {
    height: 16px;
    width: 100%;
    line-height: 16px;
    text-align: center;
    margin-top: 25px;

    font-size: 16px;

    .txt {
      &::before {
        content: '';
        position: absolute;
        margin-left: -30px;
        margin-top: 7px;
        width: 24px;
        height: 1px;
        background: #333;
      }

      &::after {
        content: '';
        position: absolute;
        position: absolute;
        margin-left: 5px;
        margin-top: 7px;
        width: 24px;
        height: 1px;
        background: #333;
      }
    }
  }

  .home_indexActivityModule_container {
    display: flex;
    justify-content: space-around;
    height: 219px;
    margin-top: 20px;

    //left
    .home_indexActivityModule_left {
      background: #f9e9cf;
      height: 205px;
      width: 170px;

      .indexActivityModule_left_text {
        font-size: 16px;
        width: 171.5px;

        height: 39px;
        padding: 17px 0 0 15px;
      }

      .indexActivityModule_left_div {
        width: 171.5px;
        height: 210px;

        img {
          width: 129px;
          height: 128.5px;
          margin-left: 20px;
        }
      }
    }

    //right
    .home_indexActivityModule_right {
      display: flex;
      // background: #f9e9cf;
      flex-direction: column;

      .indexActivityModule_right_module1 {
        width: 171.5px;
        height: 107.5px;

        .indexActivityModule_right_activityItem {
          display: flex;
          background: #f9e9cf;
          margin-bottom: 5px;

          .cnt {
            margin-top: 15px;


            .title {
              font-size: 16px;
            }

            .subTitle {
              font-size: 12px;
            }


            // div {
            //   font-size: 12px;
            // }
          }

          .picWrap {
            display: flex;
            flex-direction: column;

            width: 100px;
            height: 100px;
            // background-image: url(https://yanxuan-item.nosdn.127.net/c33bd3f821b22c3d5be67024b6926486.jpg);
            // background-size: 100px 100px;
            // background-repeat: no-repeat;
            // background-position: 10px 10px;


            // margin-top: 20px;
            .discount {
              width: 40px;
              height: 40px;
              background: #f59524;
              border-radius: 50%;
              padding-top: 0.1rem;
              color: #fff;
              text-align: center;
              margin-left: 60px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              margin-top: 10px;

              div {
                font-size: 12px;
              }

              .line2 {
                text-decoration: line-through;
              }
            }

            img {
              // margin-top: -10px;
              margin-left: 50px;
              width: 50px;
              height: 50px;
            }
          }
        }
      }
    }
  }



  //类目热销榜
  .lazy-component-wrapper {
    font-size: 14px;
    line-height: 1.5;
    color: #333;

    .categoryHotSellModule_indexFloor {
      font-size: 14px;
      line-height: 1.5;
      color: #333;

      text-size-adjust: 100%;

      box-sizing: border-box;

      outline: none;
      margin-bottom: 0.2rem;
      background-color: #fff;
    }

    .line2 {
      display: flex;
      width: 350px;
      margin-left: 10px;
      flex-wrap: wrap;
      justify-content: space-between;

      .item {
        .name {
          margin-right: -15px;
          padding-left: 10px;
          width: 73px;
          height: 18px;
          font-size: 12px;
          background: #eee;
        }

        .tm-lazyload {
          margin-bottom: 5px;
          background: #eee;

          img {
            margin-left: 15px;
            width: 68px;
            height: 60px;
          }
        }
      }

      &::after {
        content: '';

        width: 82.5px;
      }
    }

    .moduleTitle {
      font-size: 14px;
      color: #333;

      text-size-adjust: 100%;

      box-sizing: border-box;

      outline: none;
      width: 100%;
      height: 1rem;
      line-height: 1rem;
      padding: 0 10px;
      background: #fff;
      overflow: hidden;

      .left {
        color: #333;
        line-height: 1rem;
        text-size-adjust: 100%;

        box-sizing: border-box;

        outline: none;
        float: left;
        font-size: 16px;
      }
    }

    .content {
      font-size: 14px;
      line-height: 1.5;
      color: #333;
      text-size-adjust: 100%;
      box-sizing: border-box;
      outline: none;
      padding: 0 11px 6px 9px;
      display: flex;
      justify-content: space-around;

      .item-big {
        width: 171px;
        height: 100px;
        float: left;
        border-radius: 0.04rem;
        margin: 0 0.1rem 0.1rem 0;
        position: relative;

        .tm-lazyload {
          margin-top: -50px;
          margin-left: 50px;
        }

        .imgWrap {
          background: pink;

          .tm-lazyload img {
            padding-left: 20px;
            width: 100px;
            height: 100px;
          }
        }

        .name {
          line-height: 1.5;
          text-size-adjust: 100%;
          box-sizing: border-box;
          outline: none;
          position: relative;
          padding-left: 0.24rem;
          color: #333;
          font-size: 16px;
          margin-top: 0.66rem;
          z-index: 5;

          .txt {
            &::before {
              content: '';
              position: absolute;
              left: 8px;
              bottom: -0.16rem;
              width: 0.48rem;
              height: 0.04rem;
              background: #333;
            }
          }
        }
      }
    }
  }

  // 精选
  .home_index_component_wrapper {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 25px;

    //right
    .styleBanner_styleBanner_picList {
      // width: 220px;
      // height: 135px;
      background: #F5F5F5;
      margin-left: 5px;

      .title {
        padding-top: 15px;
        font-size: 16px;
        margin-left: 20px;

        line-height: 16px;
      }

      .desc {
        padding-left: 0.1rem;
        margin-left: 20px;

        font-size: 12px;
        line-height: 12px;
      }

      .picList {
        display: flex;

        img {
          margin-left: 20px;
          width: 72px;
          height: 72px;
        }
      }
    }

    //left
    .sceneLightShoppingGuideModule {
      justify-content: center;
      display: flex;

      .sceneLightShoppingGuideModuleAll {
        display: flex;

        justify-content: center;
      }

      .styleBanner_styleBanner_singlePic {
        width: 156px;
        height: 120px;
        background: #F5F5F5;
        padding-top: 15px;

        .title {
          padding-left: 0.1rem;
          font-size: 16px;
          line-height: 16px;
          margin-left: 25px;
        }

        .desc {
          padding-left: 0.1rem;
          margin-left: 20px;
          font-size: 12px;
          line-height: 12px;
          margin-bottom: -10px;
        }

        img {
          margin-left: 25px;
          margin-top: 15px;
          width: 72px;
          height: 72px;
        }
      }
    }
  }
}
</style>
